<template>
    <div>
        <div style="height: auto;width:87%;margin:0 auto;">
            <p style="margin-top:1.8vw;font-size:1.2vw;color: #7A7A7A;font-family: DengXian">图库</p>
            <p
                style="margin-top:0.1vw;font-size:2vw;color: #44519E;font-weight: bold;font-family: DengXian"
            >图片检索</p>
            <div style="margin-top:0.6vw;width: 10vw;height: 0.2vw;background-color:#45529F"></div>
        </div>
        <div v-if="isBlank" style="text-align:center;">
            <img src="../../assets/no-search.png" style="width:30vw;margin-left: 0vw;margin-top: 8vw;">
        </div>
        <div v-else>
            <PictureView style="width: 90%;margin: auto;" :pictureList="pictureList"></PictureView>
        </div>
    </div>
</template>

<script>
import PictureView from "../PictureView";
export default {
  data() {
    return {
      pictureList: [],
      msg: "",
      isBlank: false
    };
  },
  created() {
    this.msg = this.$route.query.tag;
    let _this = this;
    let params = new URLSearchParams();
    params.append("tags", this.msg);
    this.http.post(this, "/SearchResult", params).then(function(msg) {
      if (msg.data.code === "200") {
        if (msg.data.data.length > 0) {
          _this.pictureList = msg.data.data;
          _this.isBlank = false;
        } else {
          _this.isBlank = true;
        }
      } else {
        _this.isBlank = true;
      }
    });
  },
  methods: {},
  watch: {
    "$route.query.tag": function() {
      this.msg = this.$route.query.tag;
      let _this = this;
      let params = new URLSearchParams();
      params.append("tags", this.msg);
      this.http.post(this, "/SearchResult", params).then(function(msg) {
        if (msg.data.code === "200") {
          _this.pictureList = msg.data.data;
        } else {
          console.log(msg.data.message);
        }
      });
    }
  },
  components: {
    PictureView
  }
};
</script>

<style>
</style>
